<template>
	<view class="search">
		<Login></Login>
		<!-- search -->
		<view class="searchpage" style="padding: 66rpx 38rpx 0 40rpx; box-sizing: border-box">
			<div style="display: flex">
				<div style="
            width: 36px;
            height: 25px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: bold;
            line-height: 26px;
            color: #000000;
            opacity: 0.7;
          ">
					搜索
				</div>
				<div style="text-align: right; flex: 1">
					<text class="text1">删除</text>
					<text class="text2">返回箱子</text>
				</div>
			</div>
			<view class="" style="display: flex">
				<view class="weui-cells weui-cell_input" style="margin-top: 64rpx; display: flex">
					<input class="weui-input" v-model="boxName" placeholder="搜索" style="padding-left: 20rpx" />
				</view>
				<button class="mini-btn" type="primary" size="mini" @click="getGoodsList">
					搜索
				</button>
			</view>

			<view class="" style="width: 600rpx;display: flex;  flex-wrap:wrap; box-sizing: border-box; padding-top: 42rpx; ">
				<view class="whitebg" v-for="(item, index) in dataList" :key="index" @click="goSearchinput(item)">
					{{ item.boxName }}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Login from "../../common/login/login.vue"
	import request from "../../utlis/request.js";
	import BaseUrl from "../../utlis/api.js"
	export default {
		components: {
			Login
		},
		data() {
			return {
				dataList: [],
				boxName:"",
				boxId:null
			};
		},
		onLoad(options) {
			this.getDataList()
		},
		methods: {
			getGoodsList() {
				const userId = wx.getStorageSync('userId');
				const boxId = this.boxId
				uni.navigateTo({
					url: '/pages/detailsBox/detailsBox?boxId=' + boxId,
				})
			},
			getDataList() {
				const token = wx.getStorageSync('token') || [];
				const userId = wx.getStorageSync('userId');
				uni.request({
					url: BaseUrl + "/wx/sbox/box/list?userId=" + userId,
					method: 'GET',
					header: {
						"Authorization": "Bearer " + token,
					},
					success: (res) => {
						this.dataList = res.data.rows
					}
				})
			},
			goSearchinput(v){
				console.log(v.boxName)
				this.boxName=v.boxName;
				this.boxId=v.boxId
			}
		},
	};
</script>

<style>
	.search {
		width: 100%;
		height: 100%;
		background-color: #c3b18b;
	}

	.searchpage {
		width: 100%;
		height: 100%;
		background-color: #f9f7f2;
		border-radius: 20rpx;
	}

	.text1 {
		width: 24px;
		height: 17px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 26px;
		color: #000000;
		opacity: 0.6;
		margin-right: 20rpx;
	}

	.text2 {
		width: 48px;
		height: 17px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 26px;
		color: #000000;
		opacity: 0.6;
	}

	.weui-cells {
		display: inline-block;
		width: 254px;
		height: 32px;
		border: 1px solid #000;
		opacity: 0.3;
		border-radius: 10px;
	}

	.mini-btn {
		width: 61px;
		height: 32px;
		margin-top: 70rpx;
		background: #ffcf00;
		opacity: 1;
		border-radius: 10px;
	}

	.whitebg {
		width: 33%;
		height: 40px;
		background: #fff;
		opacity: 0.9;
		border-radius: 10px;
		font-weight: 800;
		line-height: 52rpx;
		color: #000000;
		font-size: 24rpx;
		box-sizing: border-box;
		padding: 15rpx;
		text-align: center;
	}
</style>
